<template>
  <div id="mynav">
    <div class="left"><img src="/static/Exhibition_img/radian.png" /></div>
    <div class="title">各楼层分布介绍</div>
    <div class="swiper-box">
      <swiper :options="swiperOption">
        <swiper-slide v-for="(page, index) in pages" :key="index">
          <div class="nav-button">
            <div
              class="button-style"
              v-for="(item, index) in page"
              :key="index"
              @click="change(item)"
            >
              <img :src="item.isactive ? item.activeimg : item.img" />
              <p>{{ item.name }}</p>
            </div>
          </div>
        </swiper-slide>
      </swiper>
      <div class="swiper-pagination swiper-drop"></div>
    </div>
    <div class="swiper-button-prev swiper-button-white"></div>
    <div class="swiper-button-next swiper-button-white"></div>
  </div>
</template>

<script>
export default {
  name: "mynav",
  data() {
    return {
      dataButton: [],
      swiperOption: {
        autoplay: false,
        grabCursor: true,
        pagination: ".swiper-pagination",
        paginationType: "fraction",
        prevButton: ".swiper-button-prev",
        nextButton: ".swiper-button-next",
      },
    };
  },
  props: {},
  mounted() {},
  computed: {
    pages() {
      const pages = [];
      this.dataButton.forEach((item, index) => {
        const page = Math.floor(index / 8);
        if (!pages[page]) {
          pages[page] = [];
        }
        pages[page].push(item);
        // console.log(pages)
      });
      return pages;
    },
  },
  created() {
    this.getInfo();
  },
  methods: {
    change(list) {
      const bol = list.isactive;
      this.dataButton.map((i) => {
        console.log(i);
        i.isactive = false;
      });
      list.isactive = !bol;
      this.$parent.navFly(list.floorall, list.index);
      // console.log(list)
      // this.$parent.navFly(1, 0)
    },
    getInfo() {
      this.axios.get("/ltmjh/floorservice/listpage").then(({ result }) => {
        var all = result.records;
        console.log(all);
        for (let i = 0; i < all.length; i++) {
          this.dataButton.push({
            name: all[i].servicetype,
            img: all[i].logoimgaddress,
            activeimg: all[i].logoimgrightaddress,
            isactive: false,
            index: i,
            floorall: all[i].floorall, //楼层
          });
        }
        // console.log(this.dataButton)
      });
    },
  },
  watch: {},
};
</script>

<style lang="less" scoped>
#mynav {
  // position: relative;
  // border: 1px solid red;
  .left {
    position: absolute;
    top: 0;
    left: -3.7rem;
    font-size: none;
    width: 3.7rem;
    height: 100%;
    z-index: -1;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .title {
    width: 9.375rem;
    height: 2.1875rem;
    padding-left: 1.25rem;
    color: white;
    font-size: 1rem;
    line-height: 2.1875rem;
    background-image: url("/static/Exhibition_img/title.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 3.125rem;
    margin-top: 0.625rem;
    margin-left: -1.3rem;
  }
  .swiper-box {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    .nav-button {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding-right: 2.3rem;
      .button-style {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 25%;
        margin: 1rem 0;
        p {
          margin-top: 0.3125rem;
          font-size: 0.75rem;
          text-align: center;
          color: #fff;
        }
        img {
          width: 42px;
          height: 42px;
        }
      }
    }
    .swiper-drop {
      position: absolute;
      bottom: -10px;
      padding-right: 2.3rem;
      color: #999999;
      // border: 1px solid red;
    }
  }
  .swiper-button-prev {
    margin-left: -2.3rem;
    // background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
  }
  // .swiper-button-next {
  //     background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
  // }
  .swiper-button-disabled {
    opacity: 0;
  }
  .swiper-button-prev,
  .swiper-button-next {
    position: absolute;
    top: 50%;
    margin-top: -13.5px;
    height: 27px;
    background-color: #7d98ce;
    border-radius: 50%;
    padding: 18px;
    background-size: 35%;
    box-shadow: #fff 0px 0px 5px inset;
  }
  .swiper-button-prev:after,
   .swiper-button-next:after {
    content: "";
  }
}
</style>